
import './PageAssembly.scss'
import { Pagination, Button, Tree, App } from 'antd'
import {
    ExportOutlined,
    CarryOutOutlined,
    PlusSquareOutlined,
    DeleteOutlined,
    AlignRightOutlined,
    RedoOutlined,
    AimOutlined,
    MenuUnfoldOutlined
} from '@ant-design/icons'
import { useState } from 'react'

import { getTreeKeys } from '../Utils'
import { modelStore, drawerStore } from '../Config/zustand'

export const PagePagination = ({ total, Paging, PagingEvent }) => {
    const { pageIndex: current, pageSize } = Paging
    return (
        <div className='PagePagination'>
            <Pagination
                align="end"
                showSizeChanger
                hideOnSinglePage
                showTotal={(total, range) => `${range[0]}-${range[1]} of ${total}`}
                total={total}
                current={current}
                pageSize={pageSize}
                onChange={(pageIndex, pageSize) => PagingEvent.emit({ pageIndex, pageSize })}
            />
        </div>
    )
}

export const PageLeftMenu = () => {
    const [expandedKeys, setExpandedKeys] = useState([])
    const [selectedKeys, setSelectedKeys] = useState([])

    const treeData = [
        {
            title: '0-0', key: '0-0',
            children: [
                {
                    title: '0-0-0', key: '0-0-0',
                    children: [
                        { title: '0-0-0-0', key: '0-0-0-0' },
                        { title: '0-0-0-1', key: '0-0-0-1' },
                        { title: '0-0-0-2', key: '0-0-0-2' },
                        { title: '0-0-0-3', key: '0-0-0-3' },
                        { title: '0-0-0-4', key: '0-0-0-4' },
                        { title: '0-0-0-5', key: '0-0-0-5' },
                        { title: '0-0-0-6', key: '0-0-0-6' },
                        { title: '0-0-0-7', key: '0-0-0-7' },
                        { title: '0-0-0-8', key: '0-0-0-8' },
                        { title: '0-0-0-9', key: '0-0-0-9' },
                    ],
                },
                {
                    title: '0-0-1', key: '0-0-1',
                    children: [
                        { title: '0-0-1-0', key: '0-0-1-0' },
                        { title: '0-0-1-1', key: '0-0-1-1' },
                        { title: '0-0-1-2', key: '0-0-1-2' },
                        { title: '0-0-1-3', key: '0-0-1-3' },
                        { title: '0-0-1-4', key: '0-0-1-4' },
                        { title: '0-0-1-5', key: '0-0-1-5' },
                        { title: '0-0-1-6', key: '0-0-1-6' },
                        { title: '0-0-1-7', key: '0-0-1-7' },
                        { title: '0-0-1-8', key: '0-0-1-8' },
                        { title: '0-0-1-9', key: '0-0-1-9' },
                    ],
                },
                {
                    title: '0-0-2', key: '0-0-2',
                    children: [
                        { title: '0-0-2-0', key: '0-0-2-0' },
                        { title: '0-0-2-1', key: '0-0-2-1' },
                        { title: '0-0-2-2', key: '0-0-2-2' },
                        { title: '0-0-2-3', key: '0-0-2-3' },
                        { title: '0-0-2-4', key: '0-0-2-4' },
                        { title: '0-0-2-5', key: '0-0-2-5' },
                        { title: '0-0-2-6', key: '0-0-2-6' },
                        { title: '0-0-2-7', key: '0-0-2-7' },
                        { title: '0-0-2-8', key: '0-0-2-8' },
                        { title: '0-0-2-9', key: '0-0-2-9' },
                    ],
                },
            ],
        },
        {
            title: '0-1',
            key: '0-1',
            children: [
                { title: '0-1-0-0', key: '0-1-0-0' },
                { title: '0-1-0-1', key: '0-1-0-1' },
                { title: '0-1-0-2', key: '0-1-0-2' },
                { title: '0-1-0-3', key: '0-1-0-3' },
                { title: '0-1-0-4', key: '0-1-0-4' },
                { title: '0-1-0-5', key: '0-1-0-5' },
                { title: '0-1-0-6', key: '0-1-0-6' },
                { title: '0-1-0-7', key: '0-1-0-7' },
                { title: '0-1-0-8', key: '0-1-0-8' },
                { title: '0-1-0-9', key: '0-1-0-9' },
            ],
        },
        { title: '0-2', key: '0-2' },
    ];

    const onSelect = (e) => {
        if (e.length !== 0) setSelectedKeys(e)
    }

    const onAll = () => {
        setExpandedKeys(expandedKeys.length === 0 ? getTreeKeys(treeData, 'key') : [])
    }


    return (
        <div className='PageLeftMenu' >
            <Button block icon={<MenuUnfoldOutlined />} onClick={onAll}>展开/收起</Button>
            <div className='Tree' >
                <Tree
                    blockNode={true}
                    onExpand={e => setExpandedKeys(e)}
                    expandedKeys={expandedKeys}
                    onSelect={onSelect}
                    selectedKeys={selectedKeys}
                    treeData={treeData}
                />
            </div>
        </div>
    )
}

export const PageTopOptions = ({ excelConfig, topOptions, DevEvent }) => {
    const { notification } = App.useApp()
    const { updateModel } = modelStore()
    const { updateDrawer } = drawerStore()
    const drawerStoreMapping = { 'model': updateModel, 'drawer': updateDrawer }
    const optionsMapping = {
        batchReview: { title: '批量审核', icon: <CarryOutOutlined style={{ color: 'rgba(251, 154, 14, 1)' }} /> },
        batchDeletion: { title: '批量删除', icon: <DeleteOutlined style={{ color: 'rgba(229, 72, 77, 1)' }} /> },
        added: { title: '添加信息', icon: <PlusSquareOutlined style={{ color: 'rgba(48, 164, 108, 1)' }} /> },
        refresh: { title: '刷新信息', icon: <RedoOutlined style={{ color: 'rgba(19, 194, 194, 1)' }} /> },
        sortData: { title: '信息排序', icon: <AlignRightOutlined style={{ color: 'rgba(19, 194, 194, 1)' }} /> },
        search: { title: '信息查询', icon: <AimOutlined style={{ color: 'rgba(255, 169, 64, 1)' }} /> },
    }

    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    DevEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'onSelectionChanged') {
            setSelectedRowKeys(data)
        }
    })

    const onClick = (key) => {
        switch (key) {
            case 'batchReview':
                if (selectedRowKeys.length === 0) {
                    notification.info({ key: 'optionsInfo', message: '操作警告', description: '批量审核操作请先选择操作数据!' })
                    return false
                }
                console.log('批量审核', selectedRowKeys)
                break;
            case 'batchDeletion':
                if (selectedRowKeys.length === 0) {
                    notification.info({ key: 'optionsInfo', message: '操作警告', description: '批量删除操作请先选择操作数据!' })
                    return false
                }
                console.log('批量删除', selectedRowKeys)
                break;
            case 'added':
                updateModel({
                    title: '新增数据',
                    type: 'FromModify',
                    data: { url: 'posMenu', fields }
                })
                break;
            case 'refresh':
                console.log('刷新')
                break;
            case 'sortData':
                console.log('排序')
                break;
            case 'search':
                console.log('查询')
                break;
            default: break;
        }
    }

    return (
        <div className='PageTopOptions'>
            <div className='excel'>
                {excelConfig &&
                    <Button
                        type='link'
                        icon={<ExportOutlined />}
                        onClick={() => console.log('导出后台excel模板')}
                    >
                        导出excel模板
                    </Button>
                }
            </div>
            <div className='options'>
                {Object.keys(optionsMapping).map(key => {
                    if (topOptions[key]) {
                        return (
                            <Button
                                type='link'
                                key={key}
                                icon={optionsMapping[key].icon}
                                onClick={() => onClick(key)}
                            >
                                {optionsMapping[key].title}
                            </Button>
                        )
                    } else {
                        return false
                    }
                })}
            </div>
        </div>
    )
}
